<template>
  <main>
    <header class="flex-row-sb-center gcs-header" v-if="!islogin">
      <p class="base-font-size">兑换前请先登录</p>
      <button class="now-login-btn ellipsis" @click="$router.push('/login')">立即登录</button>
    </header>
    <header class="gcs-header-true" v-else>
      <div style="flex: 1;padding: 15px;" class="flex-row-center">
        <span class="iconfont icon-weibiaoti1"></span>
        <span style="color: #FD5746;margin: 0 5px;">{{coin}}</span>金币
      </div>
      <div style="flex: 1;border-left: 1px solid #d6d6d6;padding: 15px;" class="flex-row-center">
        <span class="iconfont icon-weibiaoti1"></span>
        <span>兑换记录</span>
      </div>
    </header>
    <aside class="gcs-aside flex-row-sb-center">
      <div style="flex: 1;border-right: 2px solid #f5f5f5;">
        <a href="https://activity.m.duiba.com.cn/mobile/appItemDetail?appItemId=1954182&dbnewopen">
          <img class="h-img" src="https://yun.duiba.com.cn/images/201910/crwugjcwol.jpg" />
        </a>
      </div>
      <div class="flex-col-sb-center" style="flex: 1">
        <a href="https://activity.m.duiba.com.cn/mobile/appItemDetail?appItemId=2018812&dbnewopen">
          <img class="h-img" style="border-bottom: 2px solid #f5f5f5;;" src="https://yun.duiba.com.cn/images/201910/r8onusfmp9.jpg" />
        </a>
        <a href="https://activity.m.duiba.com.cn/mobile/appItemDetail?appItemId=2081161&dbnewopen">
          <img class="h-img" src="https://yun.duiba.com.cn/images/201910/sromdt6k96.jpg" />
        </a>
      </div>
    </aside>
    <div class="gcs-section flex-row-sb-center">
      <div class="d" v-for="(item, i) in shopData.list" :key="i">
        <a class="a" :href="item.url">
          <img class="img" :src="item.image" />
          <p class="p ellipsis base-font-size">{{item.title}}</p>
        </a>
      </div>
    </div>
    <div class="gcs-section flex-row-sb-center" style="margin-bottom: 100px;">
      <div class="exchange-box" v-for="(item, i) in exchangeShop" :key="i">
        <a class="exchange-a" :href="item.url">
          <img class="img" v-lazy="item.image"/>
          <div class="title">
            <div class="tag" v-if="item.tagText.split(',')[0] !== ''">{{item.tagText.split(',')[0]}}</div>
            <p class="p ellipsis base-font-size">{{item.title}}</p>
          </div>
          <span class="title-down-txt base-font-size">{{item.titleDownTxt}}</span>
          <div class="btn-box">
            <button class="exchange-btn base-font-size">兑换</button>
          </div>
        </a>
      </div>
    </div>
  </main>
</template>

<script>
import { getShopList, getAllShopList, getCoin } from '@/api/elm-data'
export default {
  name: 'gold-coin-shop',
  data() {
    return {
      islogin: false,
      coin: 0,
      shopData: [],
      exchangeShop: []
    }
  },
  async created() {
    if(window.sessionStorage.getItem('token')) {
      this.islogin = true
    }else {
      this.islogin = false
    }
    if(window.sessionStorage.getItem('USER_ID')) {
      const { data } = await getCoin(window.sessionStorage.getItem('USER_ID'))
      this.coin = data.point
    }
    document.cookie = 'wdata3 = HAoxnFPNTPgscthL7PuwXHjNBk8EjajSTVx8giFQe8uUjSzZ7raS3LkAbSy9vAVDUmuTf6LWbdpErbYwpyAzNF3NVFxVu7vJ26BzRZyCv3Mf3S6s9csbgCsE7ccNuui5Vv'
    const { data: { data } } = await getShopList()
    const { data: { data: { list } } } = await getAllShopList()
    this.shopData = data
    this.exchangeShop = list
    console.log(list)
  }
}
</script>

<style scoped>
  .gcs-header {
    padding: 10px;
    background-color: #fff;
  }
  .gcs-header-true {
    display: flex;
    background-color: #fff;
    padding: 20px;
  }
  .icon-weibiaoti1 {
    height: 44px;
    width: 44px;
    background-color: #FD5746;
    border-radius: 50%;
    line-height: 44px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    margin-right: 5px;
  }
  .now-login-btn {
    height: 60px;
    width: 150px;
    background-color: #fd5746;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 26px;
  }
  .gcs-aside {
    width: 92%;
    margin: 20px auto;
    background-color: #fff;
  }
  .h-img {
    width: 100%;
  }
  .gcs-section {
    background-color: #fff;
    flex-wrap: wrap;
  }
  .d{
    box-sizing: border-box;
    width: 49%;
    padding: 20px;
  }
  .a {
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    text-align: center;
    overflow: hidden;
  }
  .exchange-box {
    box-sizing: border-box;
    width: 50%;
    border-bottom: 2px solid #eee;
  }
  .exchange-box:nth-child(2n-1) {
    border-right: 2px solid #eee;
  }
  .exchange-a {
  }
  .img {
    width: 100%;
  }
  .title {
    display: flex;
    margin: 20px 40px;
  }
  .tag {
    padding: 5px;
    border-radius: 20px;
    background-color: #05b2c2;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
  }
  .p {
    margin: 0 10px;
  }
  .title-down-txt {
    margin-left: 40px;
    color: #fd5746;
  }
  .btn-box {
    display: flex;
    flex-direction: row-reverse;
  }
  .exchange-btn {
    display: block;
    background-color: transparent;
    border: 2px solid #fd5746;
    border-radius: 25px;
    color: #fd5746;
    padding: 5px 20px;
    margin: 10px 20px;
  }
</style>
